<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <el-carousel height="400px" direction="vertical" :autoplay="true">
      <el-carousel-item v-for="(item,index) in imgList" :key="index">
        <el-image :src="item.imgUrl" style="height: 100%;width: 100%"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="socialBody">
      <div class="socialContent">
        <!--引入webSocket聊天组件-->
        <v-webSocket></v-webSocket>
        <!--引入聊天组件-->
        <v-chat v-if="showChatWindow===true" v-bind:chatUserInfo="chatUserInfo" @close-chat="closeChat"></v-chat>
        <!--匹配专区-->
        <el-card shadow="none" style="background-color: #eef1f6;">
          <div slot="header">
            <span class="musicBodyTitle">
                <span class="musicBodyTitle2">匹配</span>专区
              </span>
          </div>
          <el-card shadow="always" style="border-radius: 15px">
            <el-row>
              <el-col :span="12" style="text-align: center;">
                <div>
                  <el-link :underline="false" @click="verifyUserInfo(1)"
                           :disabled="clickStatus">
                    <el-card style="width: 200px;height: 200px;margin: 0 auto;border-radius: 30px;background-color: #BEE7E9"
                             shadow="hover"
                             element-loading-text="正在匹配中..."
                             element-loading-svg-view-box="-10, -10, 50, 50"
                             element-loading-background="rgba(0, 0, 0, 0.8)"
                             v-loading="loading">
                      <div style="width: 160px;height: 160px">
                        <div style="text-align: left;font-size: 18px">在线匹配</div>
                        <div style="margin-top: 80px;font-weight: bold;font-size: 18px;font-family: '微软雅黑 Light'">点击匹配
                        </div>
                      </div>
                    </el-card>
                  </el-link>
                  <!--匹配成功后弹出内容-->
                  <el-dialog :visible.sync="onlineUserDialogVisible" title="匹配成功" width="50%" center
                             :close-on-click-modal="false">
                    <el-row>
                      <el-col :span="12" style="text-align: center">
                        <el-link :underline="false" @click="toUserDetail(otherUser.id)">
                          <el-image :src="otherUser.headerImg"
                                    style="width: 200px;height: 200px;border-radius: 15px"></el-image>
                        </el-link>
                        <div>
                          <span style="color: #969696;font-size: 10px;margin-top: 5px">点击头像可以进入主页查看哦</span>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <p class="socialText">昵称：{{otherUser.username}}</p>
                        <p class="socialText">性别：{{otherUser.sex}}</p>
                        <p class="socialText">年龄：{{otherUser.age}}</p>
                        <p class="socialText">标签：
                          <el-tag v-for="(item,index) in otherUser.musicHobby" :key="index" style="margin-left: 5px">
                            {{item}}
                          </el-tag>
                        </p>
                        <p class="socialText">个性签名：{{otherUser.personalSignature}}</p>
                      </el-col>
                    </el-row>
                    <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="onlineUserDialogVisible = false">有缘再见</el-button>
                          <el-button type="primary" @click="showChat">了解一下</el-button>
                        </span>
                    </template>
                  </el-dialog>
                </div>
                <div style="color: #969696;font-size: 10px;margin-top: 5px">
                  注：即时匹配用户聊天
                </div>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <div>
                  <el-link :underline="false" @click="verifyUserInfo(2)" :disabled="clickStatusV2">
                    <el-card style="width: 200px;height: 200px;margin: 0 auto;border-radius: 30px;background-color: #ECAD9E"
                             shadow="hover"
                             element-loading-text="正在匹配中..."
                             element-loading-svg-view-box="-10, -10, 50, 50"
                             element-loading-background="rgba(0, 0, 0, 0.8)"
                             v-loading="loadingV2">
                      <div style="width: 160px;height: 160px">
                        <div style="text-align: left;font-size: 18px">兴趣匹配</div>
                        <div style="margin-top: 80px;font-weight: bold;font-size: 18px;font-family: '微软雅黑 Light'">点击匹配
                        </div>
                      </div>
                    </el-card>
                  </el-link>
                  <!--开始匹配前选择匹配信息-->
                  <el-dialog :visible.sync="beforeSelectDialogVisible" title="请选择你的匹配项" width="50%" center
                             :close-on-click-modal="false">
                    <el-card shadow="always">
                      <p>
                        性别：
                        <el-select v-model="sexValue" placeholder="请选择性别，默认全部">
                          <el-option
                            v-for="item in sexOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </p>
                      <div style="margin-top: 20px;">
                        年龄：
                        <el-slider v-model="ageValue" range :marks="marks"/>
                      </div>
                      <div style="color: #969696;font-size: 10px;margin-top: 40px">
                        注：系统将根据你的喜欢列表，匹配和您具有相同口味的用户哦
                      </div>
                    </el-card>
                    <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="beforeSelectDialogVisible = false">取消匹配</el-button>
                          <el-button type="primary" @click="sendUserLike">开始匹配</el-button>
                        </span>
                    </template>
                  </el-dialog>
                  <!--                匹配成功后弹出界面-->
                  <el-dialog :visible.sync="afterMatchingDialogVisible" title="和你兴趣相投的伙伴" width="50%" center
                             :close-on-click-modal="false">
                    <el-scrollbar>
                      <el-card shadow="always">

                        <el-card shadow="hover" v-for="(item,index) in sameUserLikeInfo.userDTO" :key="index"
                                 style="margin-bottom: 20px">

                          <el-row>
                            <el-col :span="12" style="text-align: center">
                              <el-link :underline="false" @click="toUserDetail(item.id)">
                                <el-image :src="item.headerImg"
                                          style="width: 150px;height: 150px;border-radius: 15px"></el-image>
                              </el-link>
                              <div>
                                <span style="color: #969696;font-size: 10px;margin-top: 5px">点击头像可以进入主页查看哦</span>
                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div>昵称：{{item.username}}</div>
                              <div class="socialText">性别：{{item.sex}}</div>
                              <div class="socialText">年龄：{{item.age}}</div>
                              <div class="socialText"
                                   v-show="sameUserLikeInfo.userLikeSameMusicMap[item.id] !== undefined">
                                你们都喜欢的歌曲有<span style="color: #ff3c74"
                                               v-for="(item2,index2) in sameUserLikeInfo.userLikeSameMusicMap[item.id]"
                                               :key="index2">{{' '+item2.musicName+' '}}</span>
                              </div>
                              <div class="socialText"
                                   v-show="sameUserLikeInfo.userLikeSameSingerMap[item.id] !== undefined">
                                你们都喜欢的歌手有<span style="color: #ff3c74"
                                               v-for="(item3,index3) in sameUserLikeInfo.userLikeSameSingerMap[item.id]"
                                               :key="index3">{{' '+item3.singerName+' '}}</span>
                              </div>
                              <div class="socialText"
                                   v-show="sameUserLikeInfo.userSameHobbyTabsMap[item.id] !== undefined">你们的相同标签：
                                <el-tag v-for="(item1,index1) in (sameUserLikeInfo.userSameHobbyTabsMap[item.id])"
                                        :key="index1" style="margin-left: 5px">
                                  {{item1}}
                                </el-tag>
                              </div>
                            </el-col>
                          </el-row>
                        </el-card>
                        <div v-show="sameUserLikeInfo.userDTO.length === 0" style="text-align: center;color: #969696">
                          <span>暂时没有和您匹配的用户，可能你的口味有点独特哦</span>
                        </div>
                        <div style="color: #969696;font-size: 10px;margin-top: 40px">
                          注：系统将根据你的喜欢列表，匹配和您具有相同口味的用户哦
                        </div>
                      </el-card>
                    </el-scrollbar>
                  </el-dialog>
                </div>
                <div style="color: #969696;font-size: 10px;margin-top: 5px">
                  注：匹配兴趣类似的用户
                </div>
              </el-col>
            </el-row>
          </el-card>

        </el-card>
        <!--动态-->
        <el-card shadow="none" style="background-color: #eef1f6;">
          <div slot="header">
            <span class="musicBodyTitle">
                <span class="musicBodyTitle2">有缘</span>专区
              </span>
          </div>
          <!--      动态区-->
          <el-card class="IssueInfo" shadow="always" style="border-radius: 15px">
            <div v-for="(item,index) in issueCommentList" style="margin-bottom: 30px"
                 v-show="issueCommentList !== null">
              <!--头像-->
              <div
                style="display: inline-block;width: 40px;height: 40px;position: absolute;margin-top: 0">
                <el-link :underline="false" @click="toUserDetail(item.userId)">
                  <el-image :src="item.userHeaderImg" style="width: 40px;height: 40px;border-radius: 10px"></el-image>
                </el-link>

              </div>
              <div style="display: inline-block;margin-left:50px;width: 850px;height: 20px;">
                <!--用户名称和评论时间-->
                <div style="height: 40px">
                  <div>{{item.userName}}</div>
                  <span style="font-size: 10px;color: #969696">{{item.createTime}}</span>
                </div>
                <!--评论内容-->
                <div style="width: 850px;margin-top: 20px" v-html="item.content">

                </div>
                <div style="margin-top: 10px">
                  <el-link :underline="false" icon="iconfont icon-xin" v-if="item.isUserLike === 0"
                           @click="updateCommentStatus(item)">&nbsp;{{item.likeNum}}
                  </el-link>
                  <el-link :underline="false" icon="iconfont icon-xin2" v-else @click="updateCommentStatus(item)">&nbsp;{{item.likeNum}}</el-link>
                  <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                           @click="showCommit(1,index)">&nbsp;
                  </el-link>
                </div>
                <!--评论控件-->
                <div style="margin-top: 20px;" :style="{'display':item.isShowComment}">
                  <el-input
                    v-model="item.inputText"
                    maxlength="150"
                    placeholder="请写下你精彩的评论吧"
                    show-word-limit
                    type="textarea"
                  />
                  <div style="margin-top: 10px;text-align: right">
                    <el-button round size="mini" style="width: 80px" @click="removeComment(1,index)">取消</el-button>
                    <el-button type="primary" round size="mini" style="width: 80px" @click="commitCommentLevel1(item)">
                      发布
                    </el-button>
                  </div>
                </div>
                <el-divider></el-divider>
                <!--二级评论-->
                <div v-for="(item1,index1) in item.userCommentList" v-show="item.userCommentList !== null">
                  <!--头像-->
                  <div style="display: inline-block;">
                    <div
                      style="width: 40px;height: 40px;display: inline-block;position: absolute;margin-top: 0">
                      <el-link :underline="false" @click="toUserDetail(item1.userId)">
                        <el-image :src="item1.userHeaderImg"
                                  style="width: 40px;height: 40px;border-radius: 10px"></el-image>
                      </el-link>
                    </div>
                    <!--用户名称和评论时间-->
                    <div style="height: 40px;margin-left: 50px">
                      <div>{{item1.userName}}</div>
                      <span style="font-size: 10px;color: #969696">{{item1.createTime}}</span>
                      <el-popconfirm title="确定删除这条评论吗？" @confirm="deleteIssueComment(item1)">
                        <template #reference>
                          <el-link icon="iconfont icon-shanchu" :underline="false" style="float: right"
                                   v-show="loginUser.id===item1.userId"></el-link>
                        </template>
                      </el-popconfirm>
                    </div>
                    <!--评论内容-->
                    <div style="width: 850px;margin-top: 20px">
                      <el-link :underline="false" @click="toUserDetail(item1.userId)">@{{item1.replyCommentUserName}}
                        &nbsp;
                      </el-link>
                      {{item1.content}}
                    </div>
                    <div style="margin-top: 10px">
                      <el-link :underline="false" icon="iconfont icon-xin" v-if="item1.isUserLike === 0"
                               @click="updateCommentStatus(item1)">&nbsp;{{item1.likeNum}}
                      </el-link>
                      <el-link :underline="false" icon="iconfont icon-xin2" v-else @click="updateCommentStatus(item1)">
                        &nbsp;{{item1.likeNum}}
                      </el-link>
                      <el-link :underline="false" icon="iconfont icon-xiaoxi" style="margin-left: 30px"
                               @click="showCommit(2,index,index1)">&nbsp;
                      </el-link>
                    </div>
                  </div>
                  <!--二级评论控件-->
                  <div style="margin-top: 20px;" :style="{'display':item1.isShowComment}">
                    <el-input
                      v-model="item1.inputText"
                      maxlength="150"
                      placeholder="请写下你精彩的评论吧"
                      show-word-limit
                      type="textarea"
                    />
                    <div style="margin-top: 10px;text-align: right">
                      <el-button round size="mini" style="width: 80px;" @click="removeComment(2,index,index1)">取消
                      </el-button>
                      <el-button type="primary" round size="mini" style="width: 80px"
                                 @click="commitCommentLevel2(item,item1)">发布
                      </el-button>
                    </div>
                  </div>
                  <el-divider></el-divider>
                </div>
              </div>
            </div>
            <div v-show="issueCommentList == ''" style="width: 100%">
              <div style="text-align: center;color: #969696">
                <span>Ta还没有发布动态哦</span>
              </div>
            </div>
          </el-card>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
  import header from "../layout/Header";
  import footer from "../layout/Footer";
  import menu from "../layout/Menu";
  import webSocket from "../views/WebSocketTest"
  import chat from "../layout/Chat"

  export default {
    name: "SocialIndex",
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu,
      'v-webSocket': webSocket,
      'v-chat': chat
    },
    data() {
      return {
        otherUser: {
          username: '',
          id: 0,
        },
        loading: false,
        loadingV2: false,
        clickStatus: false,
        clickStatusV2: false,
        onlineUserDialogVisible: false,
        beforeSelectDialogVisible: false,
        afterMatchingDialogVisible: false,
        userInfoComplete: [],
        issueCommentList: [],
        loginUser: {
          id: 0,
        },
        sexOptions: [
          {
            value: '',
            label: '全部'
          }, {
            value: '男',
            label: '男'
          }, {
            value: '女',
            label: '女'
          }, {
            value: '保密',
            label: '保密'
          }],
        sexValue: '',
        ageValue: [0, 100],
        marks: {
          0: '襁褓',
          30: '而立',
          40: '不惑',
          50: '知命',
          60: '花甲',
          70: '古稀',
          80: '耄耋',
          90: '鲐背',
          100: '',
          18: {
            style: {
              color: '#1989FA'
            },
            label: this.$createElement('strong', '永恒的青春')
          }
        },
        sameUserLikeInfo: {
          userDTO: [],
          userLikeSameMusicMap: {},
          userLikeSameSingerMap: {},
          userSameHobbyTabsMap: {},
        },
        imgList: [],
        //向chat中传递数据
        chatUserInfo: {
          toUserName: "",
          toUserId: 0,
          myUserId: 0,
          //标识是匹配还是相互关注聊天 0匹配 1关注聊天
          chatType: 0,
        },
        showChatWindow: false,
      }
    },
    created() {
      document.title = '社交主页';
      this.getUserIssue();
      this.getWalkingImg();
    },
    mounted() {
    },
    methods: {
      closeChat(data) {
        this.showChatWindow = data;
      },
      //展示聊天窗口
      showChat() {
        this.onlineUserDialogVisible = false;
        this.chatUserInfo.toUserName = this.otherUser.username;
        this.chatUserInfo.toUserId = this.otherUser.id;
        this.chatUserInfo.myUserId = this.loginUser.id;
        this.showChatWindow = true;
      },
      //获取图片
      getWalkingImg() {
        this.$axios({
          method: 'get',
          url: '/walking/getHeaderImg/2'
        }).then(res => {
          this.imgList = res.data.data.imgList;
        })
      },
      //获取全部用户动态
      getUserIssue() {
        this.$axios({
          method: 'post',
          url: '/user/before/getAllUserIssue',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.issueCommentList = res.data.data.info;
          this.loginUser.id = res.data.data.loginUserId;
        })
      },
      //评论二级评论
      commitCommentLevel2(item, item2) {
        if (this.loginUser.id !== 0) {
          if (item2.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/commentUserIssueLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item2.inputText,
                articleId: item.articleId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item2.id,
                replyCommentUserId: item2.userId,
                replyCommentUserName: item2.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(res.data.msg);
                item2.inputText = '';
                this.getUserIssue();
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //删除动态和评论
      deleteIssueComment(item) {
        this.$axios({
          method: 'post',
          url: '/user/deleteComment/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          },
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success(`删除成功`);
            this.getUserIssue();
          } else {
            this.$message.error(`删除失败`)
          }
        })
      },
      //评论一级评论
      commitCommentLevel1(item) {
        if (this.loginUser.id !== 0) {
          if (item.inputText.split(" ").join("").length === 0) {
            this.$message.info(`不能发表空白评论哦`)
          } else {
            this.$axios({
              method: 'post',
              url: '/user/commentUserIssueLevel1',
              headers: {
                authentication: sessionStorage.getItem("token")
              },
              data: {
                content: item.inputText,
                articleId: item.articleId,
                parentId: item.id,
                parentUserId: item.userId,
                parentUserName: item.userName,
                replyCommentId: item.id,
                replyCommentUserId: item.userId,
                replyCommentUserName: item.userName
              }
            }).then(res => {
              if (res.data.msgCode === '200') {
                this.$message.success(res.data.msg);
                item.inputText = '';
                this.getUserIssue();
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        } else {
          this.$message.warning(`您还未登陆，请登陆后评论`)
        }
      },
      //展示评论
      showCommit(level, index, index2) {
        if (level === 1) {
          this.issueCommentList[index].isShowComment = 'block'
        } else {
          this.issueCommentList[index].userCommentList[index2].isShowComment = 'block'
        }

      },
      //关闭评论
      removeComment(level, index, index2) {
        if (level === 1) {
          this.issueCommentList[index].isShowComment = 'none'
        } else {
          this.issueCommentList[index].userCommentList[index2].isShowComment = 'none'
        }
      },
      //点赞评论
      updateCommentStatus(item) {
        this.$axios({
          method: 'post',
          url: '/user/commentLikes/' + item.id,
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.getUserIssue();
          }
        })
      },
      //校验用户信息是否完整
      verifyUserInfo(type) {
        this.$axios({
          method: 'post',
          url: '/user/verifyUserInfo',
          headers: {
            authentication: sessionStorage.getItem('token')
          }
        }).then(res => {
          if (res.data.msgCode !== '200') {
            this.$message.warning(res.data.msg)
          } else {
            this.userInfoComplete = res.data.data.info;
            if (this.userInfoComplete.length === 0) {
              if (type === 1) {
                this.sendOnlineFlag()
              } else if (type === 2) {
                this.beforeSelectDialogVisible = true;
              }
            } else {
              let info = '';
              for (let i = 0; i < this.userInfoComplete.length; i++) {
                info = info + ' ' + this.userInfoComplete[i];
              }
              this.$alert(
                '为更好的体检匹配功能，请您至 右上角头像->个人中心->我的资料 补充好相应信息,您的缺少信息：' + info,
                '温馨提示',
                {confirmButtonText: 'OK'}
              );
            }
          }
        })
      },
      //跳转用户细节
      toUserDetail(userId) {
        let token = sessionStorage.getItem('token');
        if (token === undefined || token === '' || token === null) {
          this.$message({
            showClose: true,
            message: '您还未登录，请登录后查看',
            type: 'info'
          })
        } else {
          let routeUrl = this.$router.resolve({
            path: '/userDetail',
            query: {
              userId: userId
            }
          });
          window.open(routeUrl.href, '_blank');
        }

      },
      //发起兴趣爱好匹配
      sendUserLike() {
        this.clickStatusV2 = true;
        this.loadingV2 = true;
        this.$axios({
          method: 'post',
          url: '/user/matchingUserLike',
          headers: {
            authentication: sessionStorage.getItem("token")
          },
          data: {
            sex: this.sexValue,
            age: this.ageValue
          }
        }).then(res => {
          if (res.data.msgCode !== '200') {
            this.$message.warning(res.data.msg);
          } else {
            this.$message.success(res.data.msg);
            this.sameUserLikeInfo = res.data.data.info;
            this.beforeSelectDialogVisible = false;
            this.afterMatchingDialogVisible = true;
            console.log(this.sameUserLikeInfo.userLikeSameSingerMap[24])
          }
          this.clickStatusV2 = false;
          this.loadingV2 = false;
        })
      },
      //发起在线匹配
      sendOnlineFlag() {
        this.clickStatus = true;
        this.loading = true;
        this.$axios({
          method: 'post',
          url: '/user/matchingUser',
          headers: {
            authentication: sessionStorage.getItem("token")
          }
        }).then(res => {
          if (res.data.msgCode !== '200') {
            this.$message.warning(res.data.msg)
          } else {
            if (res.data.msgCode_other == '9004') {
              this.$message.warning(res.data.msg)
            } else if (res.data.msgCode_other == '9006') {
              this.$message.success(res.data.msg);
              this.otherUser = res.data.data.info;
              this.onlineUserDialogVisible = true;
            }
          }
          this.clickStatus = false;
          this.loading = false;
        })
      }
    }
  }
</script>

<style scoped>


  .socialBody {
    width: 1000px;
    margin: 0 auto;
  }

  .socialText {
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .socialContent {
    margin-top: 30px;
  }

  .musicBodyTitle {
    font-family: "微软雅黑 Light";
    font-size: 30px;
    color: #99a9bf;
  }

  .musicBodyTitle2 {
    color: #1fc0ff;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 400px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }

  /deep/ .el-scrollbar {
    height: 100%;
  }

  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  /*修改滚动条样式*/
  ::-webkit-scrollbar {
    width: 3px;
    height: 1px;
  }

  /*滑块部分*/
  ::-webkit-scrollbar-thumb {
    background-color: #eee;
  }

  /*轨道部分*/
  ::-webkit-scrollbar-track {
    background-color: #333;
  }
</style>
